<template>
  <div class="layout">
    <el-form
      ref="ruleForm"
      v-loading="loading"
      :model="ruleForm"
      :rules="rules"
      label-width="150px"
      class="formstyle"
    >
      <el-form-item label="套餐名称：" prop="name">
        <el-input v-model="ruleForm.name" style="width: 300px" />
      </el-form-item>
      <el-form-item label="套餐分类：" prop="region">
        <el-select v-model="ruleForm.categoryId" placeholder="请选择菜品分类">
          <el-option
            v-for="(item, index) in region"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="套餐价格：" style="width: 800px">
        <el-input v-model="ruleForm.price" style="width: 200px" />
      </el-form-item>
      <el-form-item label="套餐菜品：" style="width: 90%">
        <div class="textrigth">
          <el-button
            type="primary"
            @click="dialogFormVisible = true"
          >+添加菜品
          </el-button>
          <el-table :data="dynamicTags" style="width: 100%">
            <el-table-column prop="name" label="名称" width="120" />
            <el-table-column prop="price" label="原价" width="120" />
            <el-table-column prop="copies" label="份数" width="200">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.copies" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
      <el-form-item label="菜品图片：" style="width: 90%">
        <el-upload
          class="avatar-uploader"
          :action="setUrl()"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-image
            v-if="getUrl(ruleForm.image)"
            :src="getUrl(ruleForm.image)"
            style="width: 200px; height: 200px"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item style="width: 800px">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >保存</el-button>
      </el-form-item>
    </el-form>
    <!-- 对话框 -->
    <el-dialog
      title="添加菜品"
      class="dialoglist"
      :visible.sync="dialogFormVisible"
    >
      <div class="dialoglistew">
        <div>
          <el-tabs tab-position="right" @tab-click="ClickO">
            <el-tab-pane v-for="o in Setmenu" :key="o.id" :label="o.name" />
          </el-tabs>
        </div>
        <div class="threddivliyy">
          <el-table
            :data="dishes"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="菜品名称" width="120" />
            <el-table-column prop="status" label="在售状态" width="60" />
            <el-table-column prop="price" label="价格" width="80" />
          </el-table>
        </div>
        <div class="threddiv">
          <div>已选菜品( {{ Selecteddishes.length }} )</div>
          <div
            v-for="(o, index) in Selecteddishes"
            :key="index"
            style="display: flex"
            class="text item"
          >
            <div>{{ o.name }}</div>
            <div>￥{{ o.price }}</div>
            <div @click="Delteethe(o)">x</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles()">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisibles(1)"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { querySetmealById, editSetmeal } from '@/api/nested'
import { getCategoryList, queryDishList } from '@/api/food'
export default {
  data() {
    return {
      ruleForm: {},
      loading: false,
      inputValue: ['', '', ''],
      inputVisible: true,
      tags: [],
      rules: {
        name: [{ required: true, message: '请输入菜品名称', trigger: 'blur' }]
      },
      region: [],
      dynamicTags: [],
      imageUrl: '',
      tableData: [],
      num: 1,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      Setmenu: [],
      dishes: [],
      Selecteddishes: [],
      Tagsall: []
    }
  },
  crdynamicTageated() {
    this.loading = false
    this.$route.meta.title = this.$route.query.title
  },
  async mounted() {
    this.region = await getCategoryList({ type: 2 })
    if (this.$route.query.id) {
      this.ruleForm = await querySetmealById(this.$route.query.id)
      this.dynamicTags = this.ruleForm.setmealDishes
      this.Tagsall = this.ruleForm.setmealDishes
      this.Selecteddishes = this.ruleForm.setmealDishes
    }
    this.Setmenu = await getCategoryList({ type: 1 })
    this.loading = false
  },
  methods: {
    handleClick(e) {
      this.dynamicTags.splice(this.Selecteddishes.indexOf(e), 1)
      this.ruleForm.setmealDishes = this.dynamicTags
    },
    // 对话框确定按钮
    dialogFormVisibles(e) {
      if (e === 1) {
        this.dynamicTags = this.Selecteddishes
        this.ruleForm.setmealDishes = this.dynamicTags
      }
      this.dialogFormVisible = false
    },
    // 对话框删除已选菜品
    Delteethe(e) {
      console.log(e)
      this.Selecteddishes.splice(this.Selecteddishes.indexOf(e), 1)
      if (this.Tagsall.indexOf(e) !== -1) {
        this.Tagsall.splice(this.Tagsall.indexOf(e), 1)
      }
      console.log(
        this.Tagsall,
        this.ruleForm.setmealDishes,
        this.Selecteddishes
      )
    },
    // 选选中菜品标签table
    handleSelectionChange(val) {
      this.Selecteddishes = Array.from(new Set(this.Tagsall.concat(val)))
    },
    // 切换菜品标签
    async ClickO(tab) {
      this.dishes = await queryDishList({
        categoryId: this.Setmenu[tab.index].id
      })
    },
    // 份数改变
    handleChange(value) {
      console.log(value)
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.ruleForm.image = this.imageUrl
      console.log(res, file, this.imageUrl)
    },
    // 图片限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      return isJPG
    },
    getUrl(image) {
      return `${process.env.VUE_APP_BASE_API}/common/download?name=${image}`
    },
    setUrl() {
      return `${process.env.VUE_APP_BASE_API}/common/download`
    },
    // 保存
    async submitForm() {
      try {
        await editSetmeal(this.ruleForm)
        this.$message.success('修改成功')
        this.$router.go(-1)
      } catch {
        console.log('error submit!!')
      }
    },
    // 取消
    resetForm() {
      this.ruleForm = {}
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.dialoglist {
  height: 800px;
}
.dialoglistew {
  display: flex;
  border-top: 1px solid rgb(239, 233, 233);
  border-bottom: 1px solid rgb(239, 233, 233);
  border-radius: 2px;
  div {
    width: 100%;
    text-align: center;
  }
  .threddiv {
    border-left: 1px solid rgb(239, 233, 233);
  }
  .threddivliyy {
    border-left: 1px solid rgb(239, 233, 233);
    border-right: 1px solid rgb(239, 233, 233);
  }
}
.layout {
  padding: 30px;
  background: #f3f4f7;
  .formstyle {
    background: #ffffff;
    padding: 30px 100px;
    display: flex;
    flex-wrap: wrap;
  }
}
.configuration {
  display: flex;
}
.inputxi {
  width: 70px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.textrigth {
  border: 1px solid rgb(217, 209, 209);
  padding: 20px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  cursor: pointer;
}
</style>
